---
title: "render · RUAL Documentation"
description: "Sends the combined HTML to the frontend and renders the page into React components."
canonical: https://docs.rual.nl/block-types/state ui/state_render_page
language: en
---

# render

This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v10.4.28`](https://docs.rual.nl/core-versions/100428).

Sends the combined HTML to the frontend and renders the page into React components.

- flow `flow`

- connection required `httpconnection`

- title required `value` The title of this web page.

- description required `value` A small description of the web page.

- body required `state` The default HTML displayed on this page. We will serve the main base using SSR (Server Side Rendering).

- onload `execute_function` This function will trigger when the page has been loaded succesfully and the viewer supports websockets. Using this event makes the page create a WebSocket connection each render, if you don't really need to, don't use it.

| `return` |
| --- |

A typical wiring for [render](https://docs.rual.nl/block-types/state%20ui/state_render_page): a [function trigger](https://docs.rual.nl/block-types/globals/trigger_custom_function) starts the flow; [container](https://docs.rual.nl/block-types/state%20ui/state_container) feeds the `content` pin; [translate key](https://docs.rual.nl/block-types/translations/value_translate_key) feeds the `title` pin; [concatenate values](https://docs.rual.nl/block-types/value/value_concatenate) feeds the `description` pin; the function out pin wires to an [execute](https://docs.rual.nl/block-types/function%20execution/function_custom_execute_from_trigger) block.

![Studio canvas example for the render block: typical wiring for render.](https://docs.rual.nl/canvas-examples/state_render_page.png)

### Commonly used with

In production blueprints, this block is most often wired together with:

- [new page](https://docs.rual.nl/block-types/state%20ui/state_page): feeds into this block. Allowes you to create a dynamic web page on the given URL.

- [container](https://docs.rual.nl/block-types/state%20ui/state_container): feeds into this block. A div with the class container on it by default.

- [translate key](https://docs.rual.nl/block-types/translations/value_translate_key): feeds into this block. Translates a given key.

- [div](https://docs.rual.nl/block-types/state%20ui/state_div): feeds into this block. Creates a dynamic and customizable div element on your web page.

- [concatenate values](https://docs.rual.nl/block-types/value/value_concatenate): feeds into this block.

- [value](https://docs.rual.nl/block-types/value/value_default): feeds into this block. Simply returns the provided value.

### Used in these guides

These documentation pages use or explain this block:

- [Quickstart](https://docs.rual.nl/getting-started/quickstart)

- [Block Quick Reference](https://docs.rual.nl/reference/block-quick-reference)

- [Finding Blocks](https://docs.rual.nl/block-types/finding-blocks)

### Version history

Introduced in [`v10.4.28`](https://docs.rual.nl/core-versions/100428).